<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
  <style media="screen">

  </style>
</head>

<body>
  <div class="dd">
    <div v-html="html">

    </div>
    <button @click="showList" type="button" name="button">button</button>
    <ul v-for="(item, index) of list">
      <li>{{item.title}}--{{item.content}}</li>
      <a href="#" v-if="index % 2 ===0">what....</a>
    </ul>
  </div>

  <script type="text/javascript">
    var vm = new Vue({
      el:".dd",
      data:{
        html:`
          <h1>h1h1h1h1</h1>
      `,
        list:[
          {title:"111111111111", content:"ccccccccccccccccccccccccccccccccc"},
          {title:"111111111111", content:"ccccccccccccccccccccccccccccccccc"},
          {title:"111111111111", content:"ccccccccccccccccccccccccccccccccc"}
        ]
      },
      methods:{
        showList(){
          this.html = `
            <h1>888888888888</h1>
          `;
          let result="";
          this.list.forEach(item => {
            result += `<h1>${item.title}</h1>
                        <p>${item.content}</p>`
          });
          this.html += result
        }
      }
      });

  </script>
</body>

</html>
